<template>
	<view v-if="orderDetail" class="wrapper">
		<view v-for="(item,index) in orderDetail.goodsList" class="goods">
			<image :src="imgUrl+item.goods_image+'?'+num" mode="aspectFit"></image>
			<view class="goods-r">
				<view class="goods-r-tit">
					{{item.goods_name}}
				</view>
				<view class="goods-r-sku">
					{{item.goods_model?item.goods_model:'默认规格'}}
				</view>
			</view>
		</view>
		<view class="logistics-box">
			<view class="logistic">
				<image src="../../static/images/wlgs.png" mode="aspectFill"></image>
				<view class="logistic-tit">
					物流公司:
				</view>
				<view class="logistic-picker" @click="showPicker">
					<view class="logistic-picker-text">{{pickerText}}</view>
					<image src="../../static/images/xia.png" mode="aspectFill"></image>
					<u-picker mode="selector" v-model="show" @confirm="confirmBtn" range-key="name" :range="selector" ></u-picker>
				</view>
			</view>
			<view class="logistic-t">
				<image src="../../static/images/wldh.png" mode="aspectFill"></image>
				<view class="logistic-tit">
					物流单号:
				</view>
				<view class="logistic-picker">
					<input type="text" v-model="logisticNo" placeholder="请输入物流单号" />
				</view>
			</view>
		</view>
		<view class="order-btn-box">
			<view @click="devBtn" class="order-btn">
				发货
			</view>
		</view>
		<!-- 提示窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail:null,//订单数据
				imgUrl:'',
				num:Math.random(),
				id:0,
				price:'',
				show:false,
				selector: null,
				logisticNo:'',
				pickerText:'请选择',
				pickerId:0,//快递公司id
			}
		},
		onLoad(e) {
			// this.id = e.id
			// this.id = 9
			this.orderDetail=JSON.parse(decodeURIComponent(e.item))
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			this.getCouriercompany()
		},
		methods: {
			// 获取快递公司
			getCouriercompany(){
				this.api._post('http://yc.tengshemall.com/index.php/Api/Index/getCouriercompany').then(res=>{
					console.log(res)
					// express_id
					this.selector=res.data
				})
			},
			showPicker(){
				this.show = true
			},
			confirmBtn(e){
				console.log(e[0])
				this.pickerText =this.selector[e[0]].name
				this.pickerId = this.selector[e[0]].express_id
			},
			devBtn(){
				this.api._post('Order/OrderShipping',{
					order_id:this.orderDetail.order_id,
					express_id:this.pickerId,
					express_sn:this.logisticNo
				}).then(res=>{
					if(res.status==1){
						this.$refs.uToast.show({
							title:res.message,
							type: 'success'
						})
						let setT = setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							clearTimeout(setT)
						},1000)
					}else{
						this.$refs.uToast.show({
							title:res.message,
							type: 'error'
						})
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	@import url('../../common/common.css');
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		padding-bottom: 150upx;
		box-sizing: border-box;
	}
	page {
		background: #f7f7f7;
	}
	.goods{
		margin-top: 20upx;
		width: 100%;
		padding: 32upx 40upx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		>image{
			width:201upx;
			height:160upx;
			background:rgba(240,240,240,1);
			border-radius:6upx;
		}
		.goods-r{
			margin-left: 30upx;
			width: 443upx;
			height: 160upx;
			display: flex;
			justify-content: space-around;
			align-items: flex-start;
			flex-direction: column;
			.goods-r-tit{
				width: 100%;
				height:80upx;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(0,0,0,1);
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.goods-r-sku{
				font-size:26upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(0,0,0,1);
			}
		}
	}
	.logistics-box{
		width: 100%;
		background: #FFFFFF;
		padding: 32upx 20upx;
		box-sizing: border-box;
		margin-top: 20upx;
		.logistic,.logistic-t{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1upx solid #EEEEEE;
			padding: 30upx 0;
			>image{
				width: 48upx;
				height: 38upx;
			}
			.logistic-tit{
				margin-left: 18upx;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.logistic-picker{
				margin-left: 42upx;
				width:460upx;
				height:80upx;
				background:rgba(247,248,250,1);
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30upx;
				box-sizing: border-box;
				position: relative;
				.logistic-picker-text{
					// margin-left: 20rpx;
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
				>image{
					width: 24upx;
					height: 12upx;
					position: absolute;
					top: 50%;
					transform: translateX(-50%);
					right: 10rpx;
				}
				>input{
					width: 90%;
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
			}
		}
		.logistic-t{
			>image{
				width: 38upx;
				height: 40upx;
				margin-right: 8upx;
			}
		}
	}
	.order-btn-box{
		width: 100%;
		height: 200upx;
		bottom: 0;
		background: #f7f7f7;
		position: fixed;
	}
	.order-btn{
		position: absolute;
		bottom:80upx;
		left: 50%;
		transform: translateX(-50%);
		width:400upx;
		height:80upx;
		background:rgba(247,0,0,1);
		box-shadow:0px 2upx 24upx 0px rgba(251,88,88,1);
		border-radius:40upx;
		text-align: center;
		line-height: 80upx;
		font-size:34upx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
</style>
